<template>
  <div>
    <button @click="comName = 'Username'">显示 Username</button>
    <button @click="comName = 'Userage'">显示 Userage</button>
    <!-- v-if 如果面对很多组件, 判断逻辑较为复杂 -->
    <!-- <Userage v-if="comName === 'Username'" /> -->
    <!-- <Userage v-else /> -->
    <!-- 使用 component 标签来解决这个问题 -->
    <component :is="comName" />
  </div>
</template>

<script>
import Username from './components/Username.vue'
import Userage from './components/Username.vue'
export default {
  components: {
    Username,
    Userage
  },
  data() {
    return {
      comName,
    };
  },

  mounted() {
    
  },

  methods: {
    
  },
};
</script>

<style lang="scss" scoped>

</style>